<template>
  <div>
    <h3>首页</h3>
    <button @click="$router.go(-1)">后退</button>
    <button @click="abc">看绿皮书</button>
    <button @click="bb">看歌手张惠妹</button>
  </div>
</template>

<script>
export default {
  methods: {
    abc () {
      // 1.字符串写法
      // this.$router.push('/movie/4/绿皮书')
      // 2.对象写法--使用path跳转（有问题，参数带不去）
      // this.$router.push({
      //   path: '/movie',
      //   params: {
      //     id: 4,
      //     name: '绿皮书'
      //   }
      // })
      // 3.对象写法--使用name跳转（能跳转成功）
      this.$router.push({
        name: 'movie', // 写路由规则的name
        params: { id: 4, name: '绿皮书' }
      })
    },
    bb () {
      // 1.字符串写法
      // this.$router.push('/music?id=3&name=张惠妹')
      // 2.对象写法--使用path跳转
      // this.$router.push({
      //   path: 'music',
      //   query: {
      //     id: 3,
      //     name: '张惠妹'
      //   }
      // })
      // 3.对象写法--使用name跳转
      this.$router.push({
        name: 'music',
        query: { id: 3, name: '张惠妹' }
      })
    }
  }
}
</script>

<style scoped>
div {
  min-height: 200px;
  background-color: tomato;
}
</style>
